<template>
  <el-dialog
    :close-on-click-modal="false"
    :visible.sync="isShow"
    destroy-on-close
    title="采购单详情"
    top="60px"
    width="900px"
  >
    <div :style="{ maxHeight }" class="dialog-scroll">
      <columnLayout title="采购单信息 (单据编号:ZJ20220215001)" border>
        <div slot="content">
          <el-form
            :model="fields"
            label-width="120px"
            ref="form"
            v-loading="loading"
          >
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="所属供应商:" prop="contractId">{{
                  this.fields.supplierName
                }}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="跟单员:" prop="customerId">{{
                  this.fields.merchandiser
                }}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="采购日期:" prop="purchaseDate">{{
                  this.fields.purchaseDate
                }}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单金额￥:" prop="orderMoney">{{
                  this.fields.orderMoney | moneyFormat
                }}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单状态:" prop="orderStatusName">{{
                  this.fields.orderStatusName
                }}</el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col :span="16">
                <el-form-item label="备注:" prop="comment">{{
                  this.fields.comment
                }}</el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="24">
              <el-col
                :span="24"
                v-if="fields.fileList && fields.fileList.length > 0"
              >
                <el-form-item label="附件信息:">
                  <file-list :fileList="fileList" @click="onClickFile" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </columnLayout>
      <columnLayout title="采购明细列表">
        <vxe-table
          :data="fields.detailList"
          :footer-method="footerMethod"
          align="left"
          border
          highlight-current-row
          ref="table"
          resizable
          show-footer
          show-header-overflow
          show-overflow
          size="mini"
          slot="content"
        >
          <vxe-table-column
            align="center"
            title="序号"
            type="seq"
            width="50px"
          />
          <vxe-table-column field="code" title="产品编码" width="100px" />
          <vxe-table-column field="name" title="产品名称" width="100px" />
          <vxe-table-column field="specs" title="产品规格" width="100px" />
          <vxe-table-column field="unit" title="单位" width="70px" />
          <vxe-table-column
            align="right"
            field="number"
            title="产品数量"
            width="100px"
          />
          <vxe-table-column
            align="right"
            field="price"
            title="产品单价￥"
            width="100px"
          >
            <template v-slot="{ row }">{{ row.price | moneyFormat }}</template>
          </vxe-table-column>
          <vxe-table-column
            align="right"
            field="totalMoney"
            title="小计￥"
            width="100px"
          >
            <template v-slot="{ row }">{{
              row.totalMoney | moneyFormat
            }}</template>
          </vxe-table-column>
          <vxe-table-column
            align="right"
            field="taxMoney"
            title="税额￥"
            width="100px"
          >
            <template v-slot="{ row }">{{
              row.taxMoney | moneyFormat
            }}</template>
          </vxe-table-column>
          <vxe-table-column
            align="right"
            field="taxRate"
            title="税率"
            width="70px"
          />
          <vxe-table-column field="comment" title="备注" width="100px" />
        </vxe-table>
      </columnLayout>
    </div>
    <div class="dialog-footer" slot="footer">
      <el-button :loading="loading" @click="closeDialog()" size="mini" plain
        >取消</el-button
      >
      <el-button
        :loading="loading"
        @click="closeDialog()"
        size="mini"
        type="primary"
        >打印</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import columnLayout from '@/components/columnLayout'
import { moneyFormat } from '@/utils/customFilter'
import FileList from '@/components/FileList'
import maxHeight from '@/mixins'
export default {
  components: {
    columnLayout,
    FileList,
  },
  mixins: [maxHeight],
  props: {
    value: {
      type: Object,
      default: () => Object.create({}),
    },
  },
  data() {
    return {
      loading: false,
      isShow: true,
      goodsPage: null,
      dialog: false,
      fileList: [
        {
          name: '采购计划.xls',
          url: 'https://zhaowan-dev.oss-cn-shenzhen.aliyuncs.com/give/0f393d88-18f5-4a92-90f8-6dea4c8b7306.xlsx',
        },
        {
          name: '钢筋布置及数量图.jpg',
          url: 'https://zhaowan-dev.oss-cn-shenzhen.aliyuncs.com/give/01be07dc-3cd5-4dfd-af30-e83695e7bb42.jpeg',
        },
        {
          name: '拟采购设备清单.xls',
          url: 'https://zhaowan-dev.oss-cn-shenzhen.aliyuncs.com/give/0f393d88-18f5-4a92-90f8-6dea4c8b7306.xlsx',
        },
        {
          name: '上海宝钢钢铁有限公司直螺纹车丝机产品说明.doc',
          url: 'https://zhaowan-dev.oss-cn-shenzhen.aliyuncs.com/give/a7da8c52-b0c2-430f-876a-4143670cddff.docx',
        },
      ],
      fields: {
        id: '1',
        supplierId: '2',
        supplierName: '上海宝钢钢铁有限公司',
        purchaseDate: '2022-01-19',
        merchandiser: '张柳',
        ifInvoice: true,
        orderMoney: '2900.00',
        orderStatus: '0',
        orderStatusName: '编辑中',
        comment: '备注234',
        stockInOrderCode: 'STI20220106009',
        detailList: [
          {
            id: '1',
            name: '螺纹钢',
            code: 'P20220122011',
            typeId: 'bedcc51eab293ba311b952b8cee7f542',
            typeName: '加工零件/桁架',
            specs: 'Φ80mm',
            enabled: true,
            unit: '件',
            unitType: 'jj',
            taxRate: '0.19',
            taxMoney: '19.00',
            purchasePrice: '120.56',
            hasPayMoney: '90.00',
            comment: '',
            bomList: [],
            number: 12,
            price: '229.56',
            totalMoney: '1000.00',
          },
          {
            id: '2',
            name: '镀锌钢板',
            code: 'P20220122012',
            typeId: 'bedcc51eab293ba311b952b8cee7f542',
            typeName: '加工零件/桁架',
            specs: '60mm',
            enabled: true,
            unit: '件',
            unitType: 'jj',
            taxRate: '0.17',
            taxMoney: '17.00',
            purchasePrice: '120.56',
            salesPrice: '129.56',
            hasPayMoney: '100',
            comment: '',
            number: 9,
            price: '829.56',
            totalMoney: '1000.00',
          },
          {
            id: '3',
            name: '优钢',
            code: 'P20220123002',
            typeId: 'bedcc51eab293ba311b952b8cee7f542',
            typeName: '加工零件/桁架',
            specs: 'Φ75mm',
            enabled: true,
            unit: '件',
            unitType: 'jj',
            taxRate: '0.17',
            taxMoney: '17.00',
            purchasePrice: '120.56',
            salesPrice: '129.56',
            hasPayMoney: '100',
            comment: '',
            number: 9,
            price: '199.56',
            totalMoney: '1000.00',
          },
        ],
        fileList: [
          {
            name: '采购文件1.doc',
            createTime: '2022-01-09',
            creator: '张震',
          },
        ],
      },
      ifInvoiceList: [
        { label: '否', value: false },
        { label: '是', value: true },
      ],
      unitTypeList: [
        { label: '计件', value: 'jj' },
        { label: '计重', value: 'jz' },
        { label: '计容', value: 'jr' },
      ],
      title: '查看详情',
    }
  },
  watch: {
    isShow: function () {
      this.$emit('input', null)
    },
  },
  created() {
    this.title = '查看详情'
  },
  computed: {},
  methods: {
    moneyFormat,
    // 合计
    sumNum(list, field) {
      let count = 0
      list.forEach((item) => {
        count += Number(item[field])
      })
      return count
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 4) {
            return '合计'
          }
          if (columnIndex === 5) {
            return `${this.sumNum(data, 'number')}`
          }
          if (columnIndex === 6) {
            return this.moneyFormat(`${this.sumNum(data, 'price')}`)
          }
          if (columnIndex === 7) {
            return this.moneyFormat(`${this.sumNum(data, 'totalMoney')}`)
          }
          if (columnIndex === 8) {
            return this.moneyFormat(`${this.sumNum(data, 'taxMoney')}`)
          }
          return
        }),
      ]
    },
    closeDialog() {
      this.isShow = false
    },
    onClickFile(fileInfo) {
      console.log('点击文件', fileInfo)
    },
  },
}
</script>

<style lang="less"></style>
